<template>
    <div class="p-r p-r-page">
        <!-- TODO: e-image需要优化为，自动适应宽高 -->
        <e-image
            :width="400"
            :height="580"
            preview
            :errText="row.moban_component_name"
            :src="parseResourceUrl(row.moban_img_url)"
        />
        <div class="p-a flex-center-wrap h-40 p-a-footer">
            <el-button type="primary" size="small" @click.stop="gopage"> 使用此模板 </el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        row: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {}
    },
    methods: {
        async gopage() {
            try {
                const { _id, bn_seo = '暂没设计' } = this.row
                const res2 = await this.$confirm('确认使用该模板吗？将会直接生成您的个人简历').catch(() => {
                    return false
                })

                if (!res2) return
                // 获取模板详情
                const res1 = await this.$apis.get_bn_moban({ _id })
                const params = {
                    bn_moban_id: _id,
                    bn_seo,
                    bn_content: res1.data.data.bn_content,
                }
                this.$message.success('创建成功')
                const res = await this.$apis.post_bn_user(params)
                this.goTo('/admin/tool/edit', {
                    query: {
                        _id: res.data.data._id,
                    },
                })
            } catch (err) {
                this.Toast(err)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.p-r-page {
    position: relative;
    height: 580px;
}
.p-a-footer {
    padding: 5px 10px;
    bottom: 0;
    left: 0;
}
</style>
